<template>
  <div class="container">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>
// 引入相关依赖
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '@/mock/xmlStr' // 直接引用 xml格式
export default {
  name: 'basic',
  data () {
    return {
      bpmnModeler: null, // bpmn 建模器
      container: null,
      canvas: null
    }
  },
  mounted () {
    console.log("111111","===================")
    this.init()
  },
  methods: {
    init () {
      console.log("2222222","===================")
      // 获取canvas的dom节点
      const canvas = this.$refs.canvas
      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas
      })
      this.createNewDiagram()
    },
    createNewDiagram () {
      // 将字符串转换成图显示出来
      try {
        const result = this.bpmnModeler.importXML(xmlStr)
        const { warnings } = result
        console.log(warnings)
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
</style>